<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // https://blog.csdn.net/zhishuidaitu/article/details/127844117
        // ES6 允许按照一定模式从数组和对象中提取值, 对变量进行赋值
        // 这被称为解构赋值
        // 对象的解构相对于数组有一个重要的不同，数组的元素按依次排序就能匹配到相应的值，也就是说变量的取值由位置决定；
        // 而对象有键名和键值，所以变量必须与属性同名，才能取到正确的值（变量与属性同名可省略特性）

        // 1.数组的结构
        // const F4 = ['小沈阳', '刘能', '赵四', '宋小宝']
        // let [xiao, liu , zhao2, song] = F4
        // console.log(xiao, liu , zhao2, song)

        // 2.对象的结构
        // const zhao = {
        //     name: '赵本山',
        //     age: 'xxx',
        //     xiaopin: function () {
        //         console.log('1111')
        //     }
        // }

        // let {name, age, xiaopin} = zhao
        // console.log(name, age, xiaopin)
        // xiaopin()

        // 案例
        //一层解构
        let obj = {
            myname: '阿乐',
            age: 18,
            height: '170cm'
        }

        // 变量与属性同名时
        let {myname, age, height} = obj
        console.log(myname, age, height)

        // 变量与属性不同名时
        let {myname: name, age: myage, height: myheight} = obj
        console.log(name, myage, myheight)

        //多层解构
        let obj2 = {
            myname: '阿乐2',
            age: 18,
            family: {
                father: 'xxxx',
                mother: 'aaaa'
            },
            height: '170cm',
            friends: ['张三', '李四', '王五']
        }

        let {myname: name1, age: myage2, family:{father:dad, mother:mum}, friends: [a, b, c]} = obj2
        console.log(name1, myage2, dad, mum, a, b, c)

    </script>
</body>
</html>